<template>
	<view>
		<view class="result-title">
			<view class="result-tabs">
				<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
					active-color="#20b86f" swiperWidth="750"></u-tabs-swiper>
			</view>
			<view class="result-share">
				<u-icon name="plus-circle" size="40" @click="goto('../pages/addTarget')" class="result-icon"></u-icon>
				<u-icon name="zhuanfa" size="40" class="result-icon" v-if="swiperCurrent == 0"></u-icon>
			</view>
		</view>
		<swiper class="result-swiper" :current="swiperCurrent" duration="0" @transition="transition"
			@animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y @scrolltolower="onreachBottom">
					<view class="result-target">
						<u-cell-group>
							<u-cell-item title="目标大学" value="北京大学"></u-cell-item>
							<u-cell-item title="当前目标" value="高考"></u-cell-item>
						</u-cell-group>
					</view>
					<view class="result-table">
						<u-table>
							<u-tr>
								<u-th>科目</u-th>
								<u-th>目标</u-th>
								<u-th>最近</u-th>
								<u-th>差距</u-th>
							</u-tr>
							<u-tr>
								<u-td>语文</u-td>
								<u-td>11</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
							</u-tr>
							<u-tr>
								<u-td>数学</u-td>
								<u-td>22</u-td>
								<u-td>20</u-td>
								<u-td>22</u-td>
							</u-tr>
							<u-tr>
								<u-td>英语</u-td>
								<u-td>22</u-td>
								<u-td>20</u-td>
								<u-td>22</u-td>
							</u-tr>
							<u-tr>
								<u-td>总分</u-td>
								<u-td>05</u-td>
								<u-td>20</u-td>
								<u-td>22</u-td>
							</u-tr>
						</u-table>
					</view>
					<view class="result-charts">
						<canvas canvas-id="canvasLineA" id="canvasLineA" class="result-charts" @touchstart="touchLineA"
							@touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y @scrolltolower="onreachBottom">
					<view class="result-table">
						<u-table>
							<u-tr>
								<u-th>名称</u-th>
								<u-th>总分</u-th>
								<u-th>排名</u-th>
								<u-th>语文</u-th>
								<u-th>数学</u-th>
								<u-th>英语</u-th>
								<u-th>理综</u-th>
							</u-tr>
							<u-tr>
								<u-td>月考</u-td>
								<u-td>11</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
							</u-tr>
							<u-tr>
								<u-td>月考</u-td>
								<u-td>11</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
							</u-tr>
							<u-tr>
								<u-td>期中</u-td>
								<u-td>11</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
							</u-tr>
							<u-tr>
								<u-td>月考</u-td>
								<u-td>11</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
							</u-tr>
							<u-tr>
								<u-td>月考</u-td>
								<u-td>11</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
							</u-tr>
							<u-tr>
								<u-td>期末</u-td>
								<u-td>11</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
								<u-td>22</u-td>
							</u-tr>
						</u-table>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import uCharts from '../../js_sdk/u-charts/u-charts/u-charts.js';
	var _self;
	var canvaLineA = null;
	export default {
		data() {
			return {
				list: [{
					name: '目标'
				}, {
					name: '成绩'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: '',
			};
		},
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
		},
		methods: {
			getServerData() {
				let LineA = {
					categories: [],
					series: []
				};
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				LineA.categories = ["月考", "月考", "期中", "月考", "月考", "期末"];
				LineA.series = [
					{name: "总分", data: [70, 40, 65, 100, 44, 68]},
					{name: "目标分数", data: [90, 90, 90, 90, 90, 90]}
				];
				_self.showLineA("canvasLineA", LineA);
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					colors:['#90ed7d', '#87cefa'],
					fontSize: 11,
					padding: [15, 20, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						boundaryGap: 'justify'
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						format: (val) => {
							return val.toFixed(0)
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'curve'
						}
					}
				});
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			},
			goto(name) {
				uni.navigateTo({
					url: name
				});
			}
		}
	};
</script>
<style lang="less" scoped>
	page {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.result-title {
		background-color: #FFFFFF;
	}

	.result-tabs {
		width: 40%;
		margin-left: 30%;
		background-color: #FFFFFF;
	}

	.result-swiper {
		min-height: calc(100vh - 80rpx);
	}

	.result-share {
		position: fixed;
		right: 20rpx;
		top: 22rpx;

		.result-icon {
			margin-right: 26rpx;
			color: #999;
		}
	}

	.result-target {
		margin: 30rpx;
		border-radius: 12px;
		overflow: hidden;

		.u-cell {
			padding-top: 20rpx !important;
			padding-bottom: 20rpx !important;
		}
	}

	.result-table {
		background-color: #FFFFFF;
		margin: 30rpx;
	}

	.result-charts {
		width: 100%;
		height: 800rpx;
	}
</style>
